function getRandomInt(min: number, max: number) {
    // 生成范围内最大的随机值
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default class Motion {
    // 动图类
    option:any;
    canvas:any;
    ctx:any;
    constructor(elementId: string, option: object) {
        this.option = option;
        this.canvas = document.getElementById(elementId);
        this.ctx = this.canvas.getContext("2d");
    }

    draw() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;

        const G = new Graph(this.canvas, this.ctx, this.option);
        G.draw();
    }

    clear(){
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }


}

class Point {
    r: number;
    x: number;
    y: number;
    xSpeed: number;
    ySpeed: number;
    lastDrawTime: any;
    canvas:any;
    ctx:any;

    constructor(canvas, ctx) {
        this.canvas = canvas;
        this.ctx = ctx;
        this.r = 2;
        this.x = getRandomInt(0, this.canvas.width - this.r / 2);
        this.y = getRandomInt(0, this.canvas.height - this.r / 2);
        this.xSpeed = getRandomInt(-50, 50);
        this.ySpeed = getRandomInt(-50, 50);
        this.lastDrawTime = null;
    }

    draw() {
        if (this.lastDrawTime) {
            // 重新计算坐标
            const duration = (Date.now() - this.lastDrawTime) / 1000;
            const xDis = duration * this.xSpeed;
            const yDis = duration * this.ySpeed;
            let x = this.x + xDis;
            let y = this.y + yDis;
            if (x > this.canvas.width - this.r / 2) {
                x = this.canvas.width - this.r / 2;
                this.xSpeed = -this.xSpeed;
            } else if (x < 0) {
                x = 0;
                this.xSpeed = -this.xSpeed;
            }
            if (y > this.canvas.height - this.r / 2) {
                y = this.canvas.height - this.r / 2;
                this.ySpeed = -this.ySpeed;
            } else if (y < 0) {
                y = 0;
                this.ySpeed = -this.ySpeed;
            }
            this.x = x;
            this.y = y;
        }
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        this.ctx.fillStyle = 'rgb(200,200,200)';
        this.ctx.fill();
        this.lastDrawTime = Date.now();
        // console.log(this.x, this.y);
    }
}

class Graph {
    points: Point[];
    canvas:any;
    ctx:any;
    maxDis:any;
    pointNumbers:any;

    constructor(canvas, ctx, option) {
        this.canvas = canvas;
        this.ctx = ctx;
        this.maxDis = option.maxDis || 200; // 最远连接距离
        this.pointNumbers = option.pointNumbers || 100; // 生成的点数量
        this.points = new Array(this.pointNumbers).fill(0).map(() => new Point(canvas, ctx));

    }

    draw() {

        const init = requestAnimationFrame(() => {
            cancelAnimationFrame(init);
            this.draw()
        })


        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        for (let i = 0; i < this.points.length; i++) {
            const p1 = this.points[i];
            p1.draw();
            for (let j = i + 1; j < this.points.length; j++) {
                const p2 = this.points[j];
                const d = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
                if (d > this.maxDis) {
                    continue;
                }
                this.ctx.beginPath();
                this.ctx.moveTo(p1.x, p1.y);
                this.ctx.lineTo(p2.x, p2.y);
                this.ctx.closePath();
                this.ctx.strokeStyle = `rgba(200,200,200,${1 - d / this.maxDis})`;
                this.ctx.stroke();
            }
        }
    }
}
